<!DOCTYPE html>
<html>
<head></head>
<body>
<div ng-controller="ControllerSettings">
 <h3>Controller</h3>


<!-- Nur Desktop Ansicht -->
<table class="table"  style="display: none;">
<thead class="ui-widget-header">
    <tr>
      <th>Name</th>
      <th>ConnectionString</th>
      <th>Aktiv</th>
      <th></th>
      <th></th>
    </tr>
  </thead>
   <tbody class="ui-widget-content">
  <tr ng-repeat="controller in controllers">
    <td>{{controller.name}}</td>
    <td>{{controller.connectionString}}</td>
    <td>{{controller.activ}}</td>
    <td><a>Change</a></td>
    <td><a>Delete</a></td>
  </tr>
  </tbody>
</table>
<!-- Ende Desktop Ansicht -->


<!-- Mobile  Ansicht -->
<table class="table OSS4Homemobile" ng-repeat="controller in controllers">
<thead class="ui-widget-header">
    <tr>
      <th>{{controller.name}}</th>
      <th> </th>
    </tr>
  </thead>
<tbody class="ui-widget-content">
<tr><th style="width: 80px">ConnectionString:</th><td>{{controller.connectionString}}</td></tr>
<tr><th style="width: 80px">Aktiv:</th><td>{{controller.activ}}</td></tr>
<tr>
<td style="width: 80px">
<button type="button" class="btn btn-default btn-md"  ng-click ="change(controller.id)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>Change</button>
</td>
<td>
<button type="button" class="btn btn-default btn-md"  ng-click ="del(controller.id)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Delete</button>
</td></tr>
</tbody>
</table>
<!-- Ende Mobile -->


<button type="button" class="btn btn-default btn-lg" ng-click="add()">
  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add
</button>
</div>
</body>
</html>